<template>
	<view>
		<u-navbar title="申请合作" :background="{ background: 'rgba(0,0,0,0)' }" :border-bottom="false" back-icon-color="#fff" title-color="#fff"></u-navbar>
		<image v-if="shop_type == 1" src="@/static/newImage/rz.png" mode="widthFix" class="bg"></image>
		<image v-else src="@/static/newImage/hz.png" mode="widthFix" class="bg"></image>
		<!-- <view class="explain">
			<view>商家入驻权益说明文案商家入驻权益说明文案商家</view>
			<view>商家入驻权益说明文案商家入驻权益说明文案商家</view>
		</view> -->
		<view class="out">
			<view class="card">
				<view class="item u-border-bottom u-flex-center u-row-between">
					<text>姓名</text>
					<input type="text" placeholder="请输入您的姓名" placeholder-class="ipt-sty" v-model="name"/>
				</view>
				<view class="item u-border-bottom u-flex-center u-row-between">
					<text>手机号</text>
					<input type="number" placeholder="请输入手机号码" placeholder-class="ipt-sty" v-model="mobile"/>
				</view>
				<!-- <view class="item u-border-bottom u-flex-center u-row-between">
					<text>所售商品</text>
					<input type="number" placeholder="请输入所售商品" placeholder-class="ipt-sty" />
				</view> -->
				<view class="item u-border-bottom u-flex-center u-row-between" @click="show=true">
					<text>所在地</text>
					<text class="right" v-if="!city">{{'请选择'}}</text>
					<text class="right right2" v-else>{{city}}</text>
				</view>
				<view class="item">
					<text>营业执照</text>
					<view class="top-sty">
						<view class="top_wrap u-flex">
							<view class="top_img top_img_big u-flex-center" v-for="item,index in fileList">
								<image :src="item" v-if="item" mode="widthFix"></image>
								<image src="@/static/index/closeblack.png" @click.stop="deleteImg(index)" class="ab_rig">
								</image>
							</view>
							<view class="top_img top_img_big u-flex-col u-col-center u-row-center" @click="uploadImg()" v-if="fileList.length < 1">
								<image src="@/static/yCreate/add2.png" class="pho" mode="widthFix"></image>
								<view>点击上传</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card card2">
				<view class="title">商家入驻说明</view>
				<view class="content" v-html="contant"></view>
			</view>
		</view>
		<view style="height: 100rpx; width: 100%;"></view>
		<view class="u-flex-center">
			<view class="button u-flex-center" @click="$u.throttle(save, 2000)">提交</view>
		</view>
		<u-picker mode="region" v-model="show" @confirm="confirm" confirm-color="#2BB984"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				fileList:[],
				fileList2:[],
				name: '',
				mobile: '',
				city: '',
				contant:'',
				shop_type:""
			};
		},
		onLoad(options) {
			this.shop_type = options.shop_type
			if (this.shop_type == 1) {
				uni.setNavigationBarTitle({
					title: "商家入驻"
				})
			} else {
				uni.setNavigationBarTitle({
					title: "申请合作"
				})
			}
			this.$u.post('api/index/get_sqsm').then(res=> {
				this.contant = res.data
			})
		},
		methods:{
			save() {
				this.$u.post('api/index/sq_shop',{
					name: this.name,
					mobile: this.mobile,
					city: this.city,
					image: this.fileList[0],
					shop_type:this.shop_type
				}).then(res=>{
					if(res.code==1) {
						this.$u.toast('提交成功')
						setTimeout(()=>{
							// uni.navigateBack()
							uni.navigateBack({
								delta:1
							})
						},1500)
					}else {
						this.$u.toast(res.msg)
					}
				})
			},
			uploadImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					crop: {
						width: uni.getSystemInfoSync().screenWidth,
						height: uni.getSystemInfoSync().screenWidth
					},
					success: function(res) {
						uni.uploadFile({
							url: 'https://apishop.qiancdj.com/api/common/upload_image', //上传
							filePath: res.tempFilePaths[0],
							name: "file",
							success: function(res) {
								let data = JSON.parse(res.data)
								that.fileList.push(data.data.fullurl)
								that.fileList2.push(data.data.url)
							},
							fail: function(err) {
			
							}
						});
					}
				})
			},
			deleteImg(index) {
				this.fileList.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			confirm(e) {
				this.city = e.province.label+'/' + e.city.label+'/' + e.area.label
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		position: fixed;
		top: 0;
		width: 100%;
		height: auto;
		z-index: 0;
	}
	.explain {
		position: fixed;
		top: 270rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 24rpx;
		color: #FFFFFF;
		white-space:nowrap;
	}
	.out {
		margin-top: 250rpx;
		position: relative;
		padding: 38rpx 30rpx;
		.card {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 40rpx;
			margin-bottom: 20rpx;
			.item {
				padding: 40rpx 0;
				font-size: 30rpx;
				input {
					font-size: 30rpx;
					text-align: right;
				}
				.ipt-sty,.right {
					font-size: 30rpx;
					color: #B0B0B0;
				}
				.right2 {
					color: #333;
				}
			}
			
		}
		.card2 {
			padding: 40rpx;
			.title {
				margin: 0 0 20rpx 0;
				font-size: 30rpx;
			}
			.content {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #666666;
			}
		}
	}
	.top-sty {
		
		margin-top: 40rpx;
	
		.top_img {
			width: 160rpx;
			height: 160rpx;
			background: #F7F7F7;
			border-radius: 20rpx;
			position: relative;
			// overflow: hidden;
			font-size: 24rpx;
			color: #B0B0B0;
			image {
				width: 100%;
				height: 100%;
			}
	
			.pho {
				margin-bottom: 10rpx;
				width: 40rpx;
				height: auto;
			}
	
			.ab {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto auto;
				z-index: 2;
			}
	
			.ab_rig {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: -25rpx;
				right: -25rpx;
				z-index: 2;
			}
		}
	
		.top_img_big {
			width: 160rpx;
			height: 160rpx;
			margin-right: 23rpx;
	
			&:nth-child(3n) {
				margin-right: 0rpx;
			}
		}
	}
	.button {
		position: fixed;
		bottom: 60rpx;
		width: 630rpx;
		height: 80rpx;
		background: linear-gradient( 98deg, #5D64CA 0%, #6F9BDF 100%);
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>
